<template>
  <div class="tab-container">
    <el-dialog
      :visible.sync="loginDialog"
      width="480px"
      class="dialog dialog-login"
      :before-close="handleClose"
    >
      <div class="right-content">
        <div class="type">
          <div :class="{'account' : loginType, 'account-active': !loginType}" @click="changeType(true)">账户登录</div>
          <div class="line" />
          <div :class="{'code-active' : !loginType, 'code' : loginType}" @click="changeType(false)">验证码登录</div>
        </div>
        <div v-if="loginType" class="content">
          <Account @registered="toRegisterPage" @password="toRestPassword" />
        </div>
        <div v-else class="content">
          <Verify @registered="toRegisterPage" @password="toRestPassword" />
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Account from '@/views/login/component/Account'
import Verify from '@/views/login/component/Verify'
export default {
  components: {
    Account,
    Verify
  },
  props: {
    loginDialog: Boolean
  },
  data() {
    return {
      currentIndex: 0,
      //   loginDialog: false,
      loginType: true
    }
  },
  mounted() {
    this.currentIndex = this.activeIndex
    // console.log(this.tabs);
  },
  methods: {
    // 右上角关闭按钮
    handleClose() {
      this.loginDialog = false
    },
    toRegisterPage() {
      this.$router.push('/register')
    },
    toRestPassword() {
      this.$router.push('/reset-password')
    }
  }
}
</script>

<style scoped lang="scss">
.tab-container {
    .right-content{
    width:359px;
    height:348px;
    // border:1px solid #E5E5E5;
    .type{
      display: flex;
      border-bottom: 1px solid #E5E5E5;
      line-height: 51px;
      justify-content: space-around;
      align-items: center;
      .account{
        color: #FF3B30;
        cursor:pointer
      }
      .account-active{
        color: #3D3D3D;
        cursor:pointer
      }
      .line{
        width:0px;
        height:16px;
        border:1px solid #E5E5E5;
      }
      .code{
        color: #3D3D3D;
        cursor:pointer
      }
      .code-active{
        color: #FF3B30;
        cursor:pointer
      }
    }
    .content{
      text-align: center;
      .iconfont{
        position: absolute;
      }
      .item{
        position: relative;
        .user{
          font-size: 24px;
          top: 26px;
          left: 35px;
        }
        .pass{
          font-size: 22px;
          top: 26px;
          left: 36px;
        }
        .key{
          font-size: 20px;
          top: 25px;
          left: 36px;
        }
        .input{
          width:317px;
          height:42px;
          border:1px solid #E5E5E5;
          margin-top: 20px;
          text-indent:44px;
        }
      }
    }
  }
}
</style>
